<template>
  <div id="live_pie">
    <div ref="pie"
         class="pieBox"></div>
  </div>
</template>

<script>
export default {
  props: {
    valueData: Array | Object,
  },
  components: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.drawpie()
  },

  methods: {
    drawpie() {
      let that = this
      let myChart = that.$echarts.init(that.$refs.pie)
      let option = {
        color: [
          '#1779ff',
          '#fd7f2c',
          '#06f0ab',
          '#b710fc',
          '#fcbc10',
          '#00ccff',
          '#c5f600',
          '#ff00a8',
          '#ff5400',
          '#00ffd8',
          '#fff600',
          '#00f645',
          '#f3a4ff',
          '#0000ff',
          '#00f6ff',
          '#ffdb9c',
          '#33d7b2',
          '#c6a4ff',
          '#2bc61b',
          '#80f2ff',
          '#ff9c9c',
          '#79c172',
          '#6edcaa',
          '#b8a92d',
          '#cf56bf',
          '#d0e2cf',
          '#c8b594',
          '#d8f7ff',
        ],
        tooltip: {
          trigger: 'item',
          formatter: '{b} :{d}%',
          confine: true, //将此限制打开后tooltip将不再溢出
          extraCssText: 'z-index: 9', //设置消息提示框的层级
        },
       
        series: [
          {
            // left: '20%',
            // right: '20%',
            // top: '20%',
            // bottom: '20%',
            name: '访问来源',
            type: 'pie',
            radius: ['42%', '55%'],
            center: ['50%', '50%'],
            minAngle: 18,
            labelLine: {
              // 设置指示线的长度
              normal: {
                length: 12,
                length2: 8,
              },
            },
            label: {
              // position: "inside",
              formatter: ' {b|{b}：}{d|{d}% }',
              borderColor: '#aaa',
              avoidLabelOverlap: true,
              rich: {
                b: {
                  fontSize: 12,
                  lineHeight: 33,
                  color: 'rgba(255,255,255,0.7)',
                },
                d: {
                  color: 'rgba(255,255,255,0.7)',
                  align: 'center',
                },
              },
            },
            data: that.valueData,
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', function () {
        myChart.resize()
      })
      this.$once('hook:beforeDestroy', () => {
        this.$echarts.dispose(myChart);
      });      
    },
  },
}
</script>
<style lang='less' scoped>
#live_pie {
  > div {
    width: 100%;
    height: 100%;
  }
}
</style>